<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.relation.domain.Resource" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<div>
	<ul id='types'>
		<li id='theme'>theme</li>
		<li id='background'>background</li>
		<li id='buy'>buy</li>
		<li id='price'>price</li>
	</ul>
	<div class='clear'><a id='add-resource' href='#'>add</a></div>
	<div id='result'></div>
</div>

<div id="dialog" title="Add Resouce">
	<form id='resource-form'>
		<input id='url' type='text' />
	</form>
</div>

<script type="text/javascript">
$( "#dialog" ).dialog({
	autoOpen: false,
	model: true,
	buttons: {
		"确定": function() {
			var url = $('#url').val();
			var type = $('#dialog').data('type');
			$.ajax({
				url: 'add-resource.action',
				data: {'resource.url': url, 'resource.type':type},
				type: 'POST',
				success: function(data){
					$('#result').html(data);
					$('#dialog').dialog( "close" );
				}
			});
			return false;
		},
		"取消": function() {
			$( this ).dialog( "close" );
		}
	},
	open: function()
	{
		$('#url').select();
	}
});

$('#theme').data('type', <%=Resource.TYPE_THEME%>);
$('#background').data('type', <%=Resource.TYPE_BACKGROUND%>);
$('#buy').data('type', <%=Resource.TYPE_BUY%>);
$('#price').data('type', <%=Resource.TYPE_PRICE%>);
$('#types>li').click(function()
{
	$('#types > li').removeClass('selected');
	$(this).addClass('selected');
	$('#result').html('<span>loading...</span>');
	var type = $(this).data('type');
	$.ajax({
		url: 'resources.action',
		data: 'type=' + type,
		type: 'POST',
		success: function(data){
			$('#result').html(data);
		}
	});
});

$("#add-resource" ).button()
.click(function() {
	var $dialog = $( "#dialog" );
	var type = $('#types > li.selected').data('type')
	$dialog.data('type', type);
	$dialog.dialog( "open" );
});

</script>